<template>
  <!-- #ifdef MP-WEIXIN -->
  <uv-navbar
    :fixed="false"
    :title="title"
    left-arrow
    @leftClick="$onClickLeft"
  />
  <!-- #endif -->
  <view>
    <view class="card flex content-center justify-between">
      <view class="">
        {{ currentLanguageTexts.WithdrawTo }}
      </view>
      <view
        class="flex content-center"
        style="padding: 10rpx 0 0; box-sizing: border-box"
        @click="setshow"
      >
        <!-- <image src="../static/icon13.png" mode=""></image> -->
        <view
          class=""
          style="line-height: 30rpx; margin: 0 10rpx"
          v-if="list.length !== 0"
        >
          {{ bankName }}({{ lastfour(bankCode) }})
        </view>
        <view
          class=""
          style="line-height: 30rpx; margin: 0 10rpx; font-size: 26rpx"
          v-else
        >
          {{ currentLanguageTexts.PleaseSelect }}
        </view>
        <view class="">
          <uv-icon name="arrow-right" size="18"></uv-icon>
        </view>
      </view>
    </view>
    <view class="card_one">
      <view class="top">
        {{ currentLanguageTexts.WithdrawalAmount }}
      </view>
      <view class="center flex content-center justify-between">
        <view class="flex content-center">
          <text class="one">$</text>
          <input
            class="two"
            v-model="amount"
            type="number"
            :placeholder="currentLanguageTexts.PleaseTheAmount"
          />
        </view>
        <view class="thr" @click="selectMony">
          {{ currentLanguageTexts.WithdrawAllfunds }}
        </view>
      </view>
      <view class="bom">
        {{ currentLanguageTexts.WithdrawableAmount }} $
        {{ merchartShop.balance }}
      </view>
    </view>
    <view class="qrBtn" @click="goDrawal">
      {{ currentLanguageTexts.ConfirmWithdrawal }}
    </view>
    <view class="content"> {{ currentLanguageTexts.ReminderDays }}。 </view>

    <uv-popup ref="popup" mode="bottom">
      <view>
        <view class="popTitle flex content-center justify-between">
          <view class=""></view>
          <view class="">{{
            currentLanguageTexts.PleaseWithdrawalAccount
          }}</view>
          <view
            class=""
            @click="gopage('/pages/components/pages/merchant/addCard')"
            >{{ currentLanguageTexts.add }}</view
          >
        </view>
        <scroll-view scroll-y="true" style="height: 650rpx">
          <view class="" v-if="list.length !== 0">
            <view
              class="popItem flex content-center justify-between align-center"
              v-for="(item, i) in list"
              :key="i"
              @click="selectCard(item.id, item.bankName, item.bankCode)"
            >
              <view class="left flex content-center">
                <image
                  class="img"
                  src="/static/images/merchant/bank.svg"
                  mode="aspectFill"
                ></image>
                <view class="">
                  <view class="name">
                    {{ item.bankName }}({{ lastfour(item.bankCode) }})
                  </view>
                </view>
              </view>
              <view class="right">
                <uv-radio-group v-model="checking">
                  <uv-radio
                    activeColor="red"
                    label=""
                    :name="item.id"
                  ></uv-radio>
                </uv-radio-group>
              </view>
            </view>
          </view>
          <view class="" v-else>
            <uv-empty :text="currentLanguageTexts.noData"></uv-empty>
          </view>
        </scroll-view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { getCards, addWith } from '@/api/merchant';
import { onLoad } from '@dcloudio/uni-app';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
import { lastfour } from '@/utils/util';
const main = useMainStore();
const { merchartShop, currentLanguageTexts } = storeToRefs(main);
const title = ref(currentLanguageTexts.value.Withdrawal);
const bankId = ref(0);
const bankName = ref('');
const bankCode = ref('');
const list = ref([]);
const amount = ref(0);
const popup = ref();

onLoad(() => {
  getList();
});

const gopage = (url) => {
  popup.value.close();
  uni.navigateTo({
    url,
  });
};

const getList = async () => {
  let res = await getCards({ shopId: merchartShop.value.id });
  if (res) {
    list.value = res;
    if (res.length > 0) {
      bankId.value = res[0].id;
      bankName.value = res[0].bankName;
      bankCode.value = res[0].bankCode;
    }
  }
};

const setshow = () => {
  popup.value.open();
  getList();
};

const selectCard = (id, name, code) => {
  bankId.value = id;
  bankName.value = name;
  bankCode.value = code;

  popup.value.close();
};

const selectMony = () => {
  amount.value = merchartShop.value.balance;
};

const goDrawal = async () => {
  if (amount == '' || amount <= 0) {
    uni.showToast({
      title: currentLanguageTexts.value.NoAmounAvailable,
      icon: 'error',
    });
    return;
  }
  let res = await addWith({
    shopId: merchartShop.value.id,
    bankId: bankId.value,
    amount: amount.value,
  });
  if (res) {
    uni.navigateBack();
  }
};
</script>

<style lang="scss">
.add {
  padding: 34rpx 40rpx;
  box-sizing: border-box;
  margin-right: 20rpx;
  border-top: 1rpx solid #e4e4e4;

  .left {
    line-height: 90rpx;

    image {
      width: 90rpx;
      height: 90rpx;
    }
  }
}

.popItem {
  padding: 24rpx 40rpx;
  box-sizing: border-box;
  margin-right: 20rpx;
  border-top: 1rpx solid #f3f3f3;

  .head {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    margin-right: 14rpx;
  }

  .left {
    .name {
      font-size: 32rpx;
      color: #333333;
      margin: 0 0 10rpx 20rpx;
      line-height: 80rpx;
    }

    .img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background-color: #f5f5f5;
      text-align: center;
      line-height: 80rpx;
    }

    .phone {
      font-size: 28rpx;
      color: #777777;
    }
  }
}

.popTitle {
  text-align: center;
  margin: 40rpx 0;
  padding: 0 24rpx;
  box-sizing: border-box;
}

page {
  background: #fafafa;
}

.qrBtn {
  width: 700rpx;
  height: 98rpx;
  background: #09b4f1;
  border-radius: 14rpx;
  text-align: center;
  line-height: 98rpx;
  font-size: 32rpx;
  color: #ffffff;
  margin: 60rpx auto 40rpx;
}

.content {
  width: 100%;
  text-align: center;
  height: 33rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 33rpx;
  letter-spacing: 1px;
  margin: 0 auto;
}

.card {
  width: 700rpx;
  height: 122rpx;
  background: #ffffff;
  border-radius: 14rpx;
  margin: 20rpx auto;
  padding: 40rpx 24rpx;
  box-sizing: border-box;

  image {
    width: 30rpx;
    height: 30rpx;
  }
}

.card_one {
  width: 700rpx;
  height: 296rpx;
  background: #ffffff;
  border-radius: 14rpx;
  margin: 0 auto;
  padding: 32rpx 25rpx;
  box-sizing: border-box;

  .top {
    font-size: 28rpx;
    color: #2f3337;
  }

  .center {
    border-bottom: 1rpx solid #ebebeb;
    padding: 22rpx 0;
    box-sizing: border-box;
    margin: 30rpx 0;

    .one {
      font-size: 40rpx;
      color: #2f3337;
      margin-right: 16rpx;
    }

    .two {
      width: 300rpx;
      height: 50rpx;
      font-size: 48rpx;
      color: #2f3337;
    }

    .thr {
      font-size: 26rpx;
      color: #00abff;
      margin-top: 10rpx;
    }
  }

  .bom {
    font-size: 24rpx;
    color: #777777;
  }
}
</style>
